<template>
  <div class="login-page">
    <div class="ct">
      <div class="r-wrap">
        <img class="logo" :src="logoUrl" />
        <div class="login-box">
          <div class="name">{{ systemName }}</div>
          <div class="form-box">
            <el-form ref="formEle" :rules="rules" :model="loginForm">
              <el-form-item prop="account">
                <el-input v-model="loginForm.account" placeholder="请输入账号">
                  <template #prefix>
                    <span v-html="userIcon"></span>
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item prop="password">
                <el-input v-model="loginForm.password" type="password" placeholder="请输入密码" show-password
                  @keyup.enter.native="handleLogin">
                  <template #prefix>
                    <span v-html="passwordIcon"></span>
                  </template>
                </el-input>
              </el-form-item>
            </el-form>
            <el-button type="primary" size="large" class="login-btn" :loading="loading" @click="handleLogin">登
              录</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">

import { onMounted } from 'vue';
// 导入图片资源
// 统一资源管理

const isFederationEnv = () => {
  // 检查全局是否存在模块联邦的共享作用域对象
  return typeof window !== 'undefined' &&
    ((window as any).__federation_shared__ !== undefined ||
      (window as any).shared !== undefined);
};

const isFed = isFederationEnv();

console.log("是否为模块联邦", isFed);

import logoBase64 from "../assets/images/public/logo.png?url";
import bgBase64 from "../assets/images/login-bck.webp?url";

const logoUrl = isFed
  ? new URL('../assets/images/public/logo.png', import.meta.url).href  // 模块联邦：使用相对路径
  : logoBase64;  // 独立构建：使用平台路径（实际不会用到，因为独立构建会内联）

const bgUrl = isFed
  ? new URL('../assets/images/login-bck.webp', import.meta.url).href  // 模块联邦：使用相对路径
  : bgBase64;  // 独立构建：使用平台路径（实际不会用到，因为独立构建会内联）


onMounted(() => {
  document.documentElement.style.setProperty('--login-bg', `url(${bgUrl})`);

});

defineOptions({
  name: "LoginView",
  components: {}
});

import { useLoginStore } from "../store/loginStore";

const dataEvent = (data: any) => {
  console.log("子组件收到数据了", data);
}

defineExpose({
  dataEvent
})

// 2. 实例化组合式 store
const loginStore = useLoginStore();

// 验证存储结果
console.log("存储后 Pinia 中的值：", loginStore.sendLoginCmd);

import { ref, type Ref, watch, computed } from "vue";
import { ElForm } from "element-plus";
import { login } from "../api/auth/index";

// 在script setup里添加这两行
import userIcon from '../assets/svg/login/user.svg?raw'
import passwordIcon from '../assets/svg/login/psw.svg?raw'

const formEle: Ref<InstanceType<typeof ElForm> | null> = ref(null);

const loginForm = ref({
  password: "",
  account: ""
});
const rules = {
  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
  account: [{ required: true, message: "请输入账号", trigger: "blur" }]
};
const loading = ref(false);
const redirect = ref("");
const systemName = computed(() => document.title);

/**
 * @description: 登录
 * @param {*}
 * @return {*}
 */
const handleLogin = () => {
  formEle.value?.validate(async (valid) => {
    if (valid) {
      try {
        loading.value = true;
        const { data } = await login(loginForm.value);
        console.log("登录后返回的数据", data);
        loading.value = false;
      } catch (error) {
        loading.value = false;
      }
    }
  });
};

</script>

<style lang="scss" scoped>
.login-page {
  width: 100%;
  height: 100%;
  /* var(--login-bg) 会接收从 JS 传来的正确路径 */
  background: var(--login-bg) no-repeat;
  background-size: cover;

  .ct {
    // background: #fff;
    display: flex;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;

    .r-wrap {
      text-align: center;

      .logo {
        height: 54px;
        margin-bottom: 30px;
      }

      .login-box {
        background: #fff;
        box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.1);
        border-radius: 10px;
        padding: 40px 40px 50px;
        width: 400px;
        box-sizing: border-box;

        .name {
          font-size: 24px;
          font-weight: bold;
          color: #333;
          margin-bottom: 40px;
        }

        :deep(.form-box) {
          .el-form {
            .el-form-item {
              margin-bottom: 20px;

              &:last-child {
                margin-bottom: 0;
              }

              .el-input {
                --el-input-height: 46px;
              }
            }
          }

          .login-btn {
            --el-button-size: 46px;
            margin-top: 60px;
            width: 100%;
          }
        }
      }
    }
  }

  .version-tips {
    position: absolute;
    left: 50%;
    bottom: 50px;
    font-size: 14px;
    color: #999fae;
    line-height: 20px;
    font-weight: 600;
    letter-spacing: 1px;
    transform: translateX(-50%);
  }
}
</style>
